<!DOCTYPE html>
<html lang="en">
<head>
    <title>填写订单信息</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon/favicon.ico" />
    <link rel="stylesheet" href="/css/cart.css">
    <link rel="stylesheet" href="/css/footer1.css">
    <link rel="stylesheet" href="/css/shop.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jq_3.3.1_mi.js"></script>
    <script src="/layui/layui.all.js"></script>
    <script src="/js/close.js"></script>
    <script src="/mylayer.js"></script>
</head>
<body>
    <!-- 购物车头部 -->
    <div class="header">
        <div class="content">
            <div class="content-left">
                <a href="" class="logo"></a>
                <h1 class="title">确认订单</h1>
            </div>
            <div class="content-right">
                <div class="userinfo">
                    <div class="username">
                        <a href="javascript:void(0)" class="toUserInfo">我是李磊</a>
                        <ul>
                            <li class="infoitem">个人中心</li>
                            <li class="infoitem">评价晒单</li>
                            <li class="infoitem">我的喜欢</li>
                            <li class="infoitem">小米账户</li>
                            <li class="infoitem">退出登录</li>
                        </ul>
                    </div>
                    <i class="fa fa-angle-down fa-1x"></i>
                </div>
                <div class="toOrderDetail"><a href="./order.html">我的订单</a></div>
            </div>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="close_content">
        <div class="close_contenter">
            <h1>收货地址</h1>
            <div id="shippingList">
                <!--<div class="close_add">
                 <h1>xxx</h1>
                 <h6>177****2345</h6>
                 <h6>河北 xx市 xx区 xx街道</h6>
                 <h6>xx栋 1405室</h6>
                    <span class="del">删除</span>
                </div>-->
                <div class="close_add1">
                 <i class="fa fa-plus-square"></i>
                 <h6>添加新地址</h6>
                </div>
                <div class="clear"></div>
            </div>
            <h2>配送方式 <span style="color: #FF6A00;font-size: 13px;margin-left: 80px;">包邮</span></h2>
            <div class="close_data">
                <h3>付款方式</h3>
                <h5 id="0" style="border-color:rgb(255,106,0)">0:货到付款</h5>
                <h5 id="1">1：微信</h5>
                <h5 id="2">2：支付宝</h5>
                <h5 id="3">3：银联</h5>
            </div>
            <h2 style="border: none;margin-top:0px; ">发票<span style="color: #FF6A00;font-size: 13px;margin-left: 125px;">电子发票&nbsp;&nbsp;  个人  &nbsp;&nbsp;商品明细&nbsp;&nbsp;  修改 ></span></h2>
            <h4>商品及优惠券 <a href="./cart.html">返回购物车&nbsp; <i class="fa fa-chevron-right"></i> </a></h4>
            <div id="cartList" class="close_shop">
                <!--<p>
                    <img src="./static/img/pms (2).jpg"><a href="./detail.html">红米6A 全网通版 2GB内存 16GB 流沙金  </a>599元 x 1
                    <span >599元</span>
                </p>-->
                <div class="clear"></div>
            </div>
            <div class="close_much">
                <div class="close_much_left">
                  <p><i class="fa fa-plus-square"></i>使用优惠券</p>
                  <p><i class="fa fa-plus-square"></i>使用小米礼品卡</p>
                </div>
                <div class="close_much_right">
                   <p>商品件数  :<span>3件</span></p> 
                   <p>商品总价  :<span>4999元</span></p> 
                   <p>优惠活动  :<span>-0元</span></p> 
                   <p>优惠券抵扣  :<span>-0元</span></p> 
                   <p>运费  :<span>0元</span></p> 
                   <p style="height: 50px;line-height:50px; ">应付总额  :<span class="zong">4999 <b> 元</b></span></p>                  
                </div>
                <div class="clear"></div>
            </div> 
        </div>
        <div class="close_clear">
              <button class="submit-cart">立即下单</button>
        </div>
    </div>

    <!--   网页底部   -->
    <div class="footer-top">
        <div class="footer-top_li">
            <div class="footer-top_li_1">
                <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
                <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
                <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
                <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
                <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
            </div>
            <span class="separate"></span>
            <div class="footer-top_li_2">
                <div class="footer-top_li_a">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="">账户管理</a></dd>
                        <dd><a href="">购物指南</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="">小米之家</a></dd>
                        <dd><a href="">服务网点</a></dd>
                        <dd><a href="">授权体验店</a></dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd><a href="">了解小米</a></dd>
                        <dd><a href="">加入小米</a></dd>
                        <dd><a href="">投资者关系</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="">新浪微博</a></dd>
                        <dd><a href="">官网微博</a></dd>
                        <dd><a href="">联系我们</a></dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><a href="">F码通道</a></dd>
                        <dd><a href="">礼物码</a></dd>
                        <dd><a href="">防伪查询</a></dd>
                    </dl>
                    <div class="connect">
                        <p class="telephone">Feir-520-1314</p>
                        <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
                        <button><span class="fa fa-commenting "></span> 联系客服</button>
                    </div>
                </div>
                <div class="footer-top_li_b"></div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="footer-bottom_li">
            <div class="footer-bottom_li_1">
                <img src="./static/img/footlogo.png" alt="" class="logoBottom">
            </div>
            <div class="footer-bottom_li_2">
                <div class="footer-bottom_li_a">
                    <ul>
                        <li>小米商城<span></span></li>
                        <li>MIUI<span></span></li>
                        <li>米家<span></span></li>
                        <li>米聊<span></span></li>
                        <li>多看<span></span></li>
                        <li>游戏<span></span></li>
                        <li>路由器<span></span></li>
                        <li>米粉卡<span></span></li>
                        <li>政企服务<span></span></li>
                        <li>小米天猫店<span></span></li>
                        <li>隐私政策<span></span></li>
                        <li>问题反馈<span></span></li>
                        <li>Select Region</li>
                    </ul>
                </div>
                <div class="footer-bottom_li_b">
                    <a href="">©mi.com</a>
                    京ICP证110507号
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2014]0059-0009号</a>
                    <br>
                    违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </div>
            </div>
            <div class="footer-bottom_li_3">
                <img src="./static/img/footericon1.png" alt="" class="icon">
                <img src="./static/img/footericon2.png" alt="" class="icon">
                <img src="./static/img/footericon3.png" alt="" class="icon">
                <img src="./static/img/footericon4.png" alt="" class="icon">
                <img src="./static/img/footericon5.png" alt="" class="icon">
            </div>
            <div class="footer-bottom_li_4">
               探索黑科技，小米为发烧而生！
            </div>   
        </div>  
    </div>
    <script>
        layui.use('form', function(){
            var form = layui.form;
            form.render();
            
            $('.submit-cart').click(function () {
                $.post(
                    '/order/add',
                    {'shippingId': $('.close_add[checked="checked"]').attr('id'), 'paymentType': $('.close_data h5[checked="checked"]').attr('id')},
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            mylayer.okUrl(result.msg, '/page/order/list');
                        } else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
            });



			function selectShippingList() {
				$.post(
						'/shipping/list',
						function (result) {
							console.log(result);
							if (result.code == 0) {
								$('#shippingList div.close_add').remove();
								//$('#shippingList').empty();
								$(result.data).each(function () {
									var html = '';
									html+='<div id="'+this.id+'" class="close_add">'
									html+='    <h1>'+this.receiverName+'</h1>'
									html+='    <h6>1'+this.receiverPhone+'</h6>'
									html+='    <h6>'+this.receiverProvince+' '+this.receiverCity+'市 '+this.receiverDistrict+'区</h6>'
									html+='    <h6>'+this.receiverAddress+'</h6>'
									html+='    <span class="del">删除</span>'
									html+='</div>'
									$('#shippingList').prepend(html);
								});
							}
						},
						'json'
				);
			}

			selectShippingList();

            $.post(
                '/cart/list',
                {'checked': 1},
                function (result) {
                    console.log(result);
                    if (result.code == 0) {
                        var totalCount = 0;
                        var totalPrice = 0;
                        $(result.data).each(function () {
                            var html = '';
                            html+='<p>'
                            html+='    <img width="30px" height="30px" src="'+this.productMainImage+'"><a href="/page/product/detail?id='+this.productId+'">'+this.productName+'</a>'+this.productPrice+'元 x '+this.quantity+''
                            html+='        <span >'+(this.productPrice*this.quantity)+'元</span>'
                            html+='</p>'
                            $('#cartList').append(html);
                        });

                    }
                },
                'json'
            );

			//弹窗
			$('.close_add1').click(function(){
				layer.open({
					type: 1,
					area:['900px', '400px'],
					title: '填写新地址',
					content:
							'   <form class="layui-form  layui-col-space10" action="">\n' +
							'        <div class="layui-form-item  layui-col-space10">\n' +
							'            <div class="layui-col-md6">\n' +
							'                <input type="text" name="receiverName" required  lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input">\n' +
							'            </div>\n' +
							'            <div class="layui-col-md6">\n' +
							'                <input type="text" name="receiverPhone" required lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">\n' +
							'            </div>\n' +
							'        </div>\n' +
							'        <div class="layui-form-item  layui-col-space10">\n' +
							'            <div class="layui-col-md4" >\n' +
							'                <select name="receiverProvince" id="provinceId" style="display: block;" lay-filter="city">' +
							'                   <option value="">请选择你的省</option>' +
							/*  '                   <option value="1">北京</option>   ' +
							  '                   <option value="2">上海</option>   ' +
							  '                   <option value="3">广州</option>   ' +
							  '                   <option value="4">深圳</option>   ' +
							  '                   <option value="5">安徽</option>   ' +*/
							'                </select>' +
							'            </div>\n' +
							'            <div class="layui-col-md4" >\n' +
							'                <select name="receiverCity" id="cityId" style="display: block;" lay-filter="city">' +
							'                   <option value="">请选择你的城市</option>' +
							/*  '                   <option value="1">合肥</option>   ' +
							  '                   <option value="2">北京</option>   ' +
							  '                   <option value="3">上海</option>   ' +
							  '                   <option value="4">深圳</option>   ' +*/
							'                </select>' +
							'            </div>\n' +
							'            <div class="layui-col-md4" >\n' +
							'                <select name="receiverDistrict" id="areaId" style="display: block;" lay-filter="city">' +
							'                   <option value="">请选择你的区</option>' +
							/*   '                   <option value="1">蜀山</option>   ' +
							   '                   <option value="2">肥东</option>   ' +
							   '                   <option value="3">肥西</option>   ' +
							   '                   <option value="4">政务区</option>   ' +*/
							'                </select>' +
							'            </div>\n' +
							'        </div>\n' +
							'        <div class="layui-col-md12">\n' +
							'            <div class="layui-col-md12">\n' +
							'                <textarea name="receiverAddress" placeholder="详细地址" class="layui-textarea"></textarea>\n' +
							'            </div>\n' +
							'        </div>\n' +
							'        <div class="layui-form-item  layui-col-space10">\n' +
							'            <div class="layui-col-md6">\n' +
							'                <input type="text" name="receiverZip" required lay-verify="required" placeholder="邮政编码" autocomplete="off" class="layui-input">\n' +
							'            </div>\n' +
							'        </div>\n' +
							'		<button type="button" lay-submit lay-filter="submitLogin">添加</button>\n' +
							'    </form>',
					// 层弹出后的成功回调方法：layero前层DOM，index当前层索引
					success: function(layero, index){
						$.post(
								'/shipping/selectProvince',
								function (result) {
									console.log(result);
									if (result.code == 0) {
										//[{id: 320000, name: '江苏省'},{id: 330000, name: '浙江省'}]
										$(result.data).each(function () {
											//this: {id: 320000, name: '江苏省'}
											//<option value="320000">江苏省</option>
											$('#provinceId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
										})
									}
								},
								'json'
						)

						//给省份下拉框绑定change事件
						$('#provinceId').change(function () {
							//this  js dom
							//{'provinceId': $(this).val()},
							//$(this).val();
							$.post(
									'/shipping/selectCity',
									{'provinceId': $('#provinceId option:selected').attr('id')},
									function (result) {
										console.log(result);
										if (result.code == 0) {
											//清除掉原来的数据
											//$('#cityId option:gt(0)').remove();
											$('#cityId option:not(:first)').remove();
											$(result.data).each(function () {
												$('#cityId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
											})
										}

									},
									'json'
							)
						});

						//给省份下拉框绑定change事件
						$('#cityId').change(function () {
							//this  js dom
							$.post(
									'/shipping/selectArea',
									{'cityId': $('#cityId option:selected').attr('id')},
									function (result) {
										console.log(result);
										if (result.code == 0) {
											//清除掉原来的数据
											//$('#cityId option:gt(0)').remove();
											$('#areaId option:not(:first)').remove();
											$(result.data).each(function () {
												$('#areaId').append('<option id="'+this.id+'" value="'+this.name+'">'+this.name+'</option>');
											})
										}
									},
									'json'
							)
						});



						//layui提交form表单事件
						form.on('submit(submitLogin)', function (data) {
							var field = data.field;
							$.post(
									'/shipping/add',
									field, //{'name':'zhangsan','password':'123'}
									function (result) {
										if (result.code == 0) {
											mylayer.okMsg(result.msg);
											selectShippingList();
											layer.close(index);
										} else {
											mylayer.errorMsg(result.msg);
										}
									}
							);

							return false; // 阻止默认 form 跳转
						});


					},
				});
			})

        });



    </script>
</body>
</html>